<!--
 * @Author: 杨有财
 * @Date: 2025-03-01 21:24:38
 * @LastEditTime: 2025-03-01 21:46:38
 * @LastEditors: 杨有财
 * @Description: 公共气泡组件
 * 
-->
<template>
  <t-tooltip
    :content="isShowTooltip ? content : ''"
    :theme="theme"
    :show-arrow="showArrow"
    :placement="placement"
    :hide-empty-popup="true"
    class="CompTooltip"
  >
    <span :style="{ width: `${width}` }" class="text" @mouseenter="showToltip($event)">
      <slot></slot>
    </span>
  </t-tooltip>
</template>
<script setup lang="ts">
import { PlacementType, ThemeType } from './types';

defineOptions({
  name: 'CommonTooltip',
});
const { content, showArrow, placement, theme, width } = defineProps({
  // 提示内容
  content: {
    type: String,
    default: '',
  },
  // 是否显示浮层箭头
  showArrow: {
    type: Boolean,
    default: true,
  },
  // 是否显示浮层箭头
  placement: {
    type: String as PropType<PlacementType>,
    default: 'top',
  },
  // 文字提示风格。可选项：default/primary/success/danger/warning/light
  theme: {
    type: String as PropType<ThemeType>,
    default: 'default',
  },
  // 内容宽度
  width: {
    type: String,
    default: '140px',
  },
});
const isShowTooltip = ref(false);
function showToltip(el: MouseEvent) {
  //   如果内容宽度大于 span 元素宽度返回 true
  const textContent = el.target as HTMLElement;
  const targetW = textContent.getBoundingClientRect().width;
  const range = document.createRange();
  range.setStart(textContent, 0);
  range.setEnd(textContent, textContent.childNodes.length);
  const rangeWidth = range.getBoundingClientRect().width;
  console.log(rangeWidth, targetW);
  isShowTooltip.value = rangeWidth > targetW;
}
</script>

<style lang="less" scoped>
@import '@/style/override';

.page-sim-manage {
  .text {
    .overflow-text-ellipsis();

    display: inline-block;
    vertical-align: top;
  }
}
</style>
